<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="Click Me1" onclick="console.log('Click')">
<input type="button" value="Click Me2" onclick="showMessage()">
<input type="button" value="Click Me3" onclick=showMessage()>
<input type="button" value="event" onclick=showMessage2(event)>
<input type="button" value="this" onclick="console.log(this.value)">
<input type="button" value="show-value" onclick="console.log(value)">
<script>
    /*
        1. 看上面的三种方式
     */
    function showMessage() {
        console.log('Hello world')
    } 
    
    /*
        2.函数中有一个特殊的局部变量event
     */
    function showMessage2(event) {
        console.log('event',event,event.target.value)
    }
    
    /*
        3.还有一个this对象,指向该元素
     */
    
    /*
        4.里面会有with自动解构?? 比如上面的console.log(value)打印show-value,type打印button
     */
    
    /*
        5.文中说这样写耦合太高
     */
</script>
</body>
</html>